<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<script>
			let arr = [1, 2, 3];
			console.log(arr); //[1, 2, 3]
			console.log(...arr); //1 2 3
			
			// 扩展运算符可以用于数组合并			
			let arr1 = [1, 2, 3];
			let arr2 = [3, 4, 5];
			// 方法一:	
			let arr3 = [...arr1, ...arr2];
			console.log(arr3); //[1, 2, 3, 3, 4, 5]
			// 方法二:	
			arr1.push(...arr2);
			console.log(arr1); //[1, 2, 3, 3, 4, 5]
			
			//利用扩展运算符将伪数组转换为真正的数组
			let oDivs = document.querySelectorAll('div');
			console.log(oDivs); //NodeList(5) [div, div, div, div, div] 伪数组
			let ary = [...oDivs];
			console.log(ary); //[div, div, div, div, div] 数组
			ary.push('a');
			console.log(ary); //[div, div, div, div, div, "a"]
			
			// Array的扩展方法，构造函数方法：Array.from()	
			// 将类数组或可遍历对象转化为真正的数组
			let arrayLike = {
				'0': '1',
				'1': '2',
				length: 2
			}
			let arr4 = Array.from(arrayLike);
			console.log(arr4);//["1", "2"]
			// 该方法还可以接收第二个参数,类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组	
			let arr5 = Array.from(arrayLike, item => item * 3);
			console.log(arr5); //[3, 6]
			
			// 实例方法find()
			// 用于找到第一个符合条件的数组成员,没找到则返回undefined
			let ary1 = [{
				id: 1,
				name: '张三'
			}, {
				id: 2,
				name: '李四'
			}];
			let ary11 = ary1.find(item => item.id == 2);
			console.log(ary11); //{id: 2, name: "李四"}
			let ary12 = ary1.find(item => item.id == 3);
			console.log(ary12); //undefined
			
			// 实例方法findIndex()	
			// 用于找到第一个符合条件的数组成员位置,没有则返回-1
			let ary2 = [1, 5, 10, 20, 30];
			let ary21 = ary2.findIndex(value => value > 9);
			console.log(ary21); //2
			
			// 实例方法includes()
			// 表示数组是否包含给定的值,返回布尔值
			console.log([1, 2, 3, 4, 5].includes(5)); //true
			console.log([1, 2, 3].includes(5)); //false
			
			// 模板字符串
			let name = `Andy`;
			let sayhello = `Hello, 我的名字叫${name}`;
			console.log(sayhello);
			// 模板字符串可以换行	
			let result = {
				name: 'zhangsan',
				age: 18
			}
			let html =
				`<div>
					<span>${result.name}</span><br>
			   	<span>${result.age}</span>
				 </div>`;
			console.log(html);
			
			// 在模板字符串中可以调用函数
			const fn = () => {
				return '我是fn函数';
			}
			let all = `我是模板字符串${fn()}`;
			console.log(all);
			
			// 字符串扩展方法
			// 实例方法startsWidth()和endsWidth()	
			// startsWidth表示参数字符串是否在原字符串的头部,返回布尔值
			// endsWidth表示参数字符串是否在原字符串的尾部,返回布尔值
			let str = 'Hello world!';
			console.log(str.startsWith('Hello')); //true
			console.log(str.endsWith('!')); //true
			
			// 实例方法 repeat()方法
			// 将一个字符串重复n次,返回一个新的字符串
			console.log(str.repeat(3));
		</script>
	</body>
</html>
